<template>

  <div ref="myechart" class="container"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
   mounted(){
    this.innitchart()
   },
   methods:{
    innitchart(){
        var mypic = echarts.init(this.$refs.myechart)
        mypic.setOption( {
  backgroundColor: 'transparent',
  title: {
    text: '用户分布',
    left: 'center',
    top: 20,
    textStyle: {
      color: '#38689E'
    }
  },
  tooltip: {
    trigger: 'item'
  },
  visualMap: {
    show: false,
    min: 80,
    max: 600,
    inRange: {
      colorLightness: [0, 1]
    }
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '55%',
      center: ['50%', '50%'],
      data: [
        { value: 325, name: '普通用户' },
        { value: 290, name: 'VIP' },
        { value: 274, name: '钻石VIP' },
        //  { value: 374, name: '男性' },
        //   { value: 574, name: '女性' },
      ].sort(function (a, b) {
        return a.value - b.value;
      }),
      roseType: 'radius',
      label: {
        color: '#38689E'
      },
      labelLine: {
        lineStyle: {
          color: '#38689E'
        },
        smooth: 0.2,
        length: 10,
        length2: 20
      },
      itemStyle: {
        color: '#c8adc4',
        shadowBlur: 200,
        shadowColor: '#f0a1a8'
      },
      animationType: 'scale',
      animationEasing: 'elasticOut',
      animationDelay: function (idx) {
        return Math.random() * 200;
      }
    }
  ]
})

   }
   }
}
</script>

<style scoped>
 .container{
    width: 340px;
    height: 300px;
 }
</style>>

